<template>
  <!-- 订单 -->
  <div class="customer_box">
    <div class="order_box">
      <div style="height: 20px"></div>
      <div style="width: 60%; height: 30%; background-color: #76c5de8c">
        <h1 style="color: #db5e5e">ORDER / LIST</h1>
        <p style="font-size: 30px">订单列表</p>
      </div>
      <div style="height: 20px"></div>

      <div class="list_box">
        <el-table
          :data="ItemList"
          style="width: 100%"
          :header-cell-style="{ height: '100px', fontSize: '18px' }"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="200px"
          >
          </el-table-column>
          <el-table-column prop="order_number" label="订单编号" align="center">
          </el-table-column>
          <el-table-column prop="pictureUrl" label="图片" align="center">
            <template slot-scope="scope">
              <img
                style="width: 40%"
                :src="'http://127.0.0.1:8000' + scope.row.artwork.image"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column prop="artwork.title" label="名称" align="center">
          </el-table-column>
          <el-table-column
            prop="artwork.artist.real_name"
            label="作者"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center">
            <template slot-scope="scope">
              <el-tag type="primary" v-if="scope.row.status == '0'"
              >待支付</el-tag
            >
            <el-tag type="success" v-if="scope.row.status == '1'"
              >已完成</el-tag
            >
            <el-tag type="warning" v-if="scope.row.status == '2'"
              >已取消</el-tag
            >
            <el-tag type="warning" v-if="scope.row.status == '3'"
              >退货申请中</el-tag
            >
            <el-tag type="warning" v-if="scope.row.status == '4'"
              >退货成功</el-tag
            >
            <el-tag type="warning" v-if="scope.row.status == '5'"
              >拒绝退货</el-tag
            >
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="200px"
          >
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status == '0' && user.role == 1"
                @click="handleDelete(scope.row.id)"
                type="danger"
                size="small"
                >取消订单</el-button
              >
              <el-button
                v-if="scope.row.status == '1'"
                @click="rating(scope.row.id)"
                type="primary"
                size="small"
                >评论</el-button
              >
              <el-button
                v-if="scope.row.status == '1'"
                @click="Return(scope.row.id)"
                type="danger"
                size="small"
                >退货</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 评论弹框 -->
        <div>
          <el-dialog
            title="评分评论"
            :visible.sync="open"
            width="500px"
            :before-close="cancel"
          >
            <el-form
              :model="ratingForm"
              :inline="true"
              class="visible"
              label-width="120px"
              ref="ratingForm"
            >
              <el-form-item label="评分">
                <el-rate
                  v-model="ratingForm.score"
                  :colors="colors"
                  style="width: 300px; line-height: 2"
                >
                </el-rate>
              </el-form-item>
              <el-form-item label="评论内容">
                <el-input
                  type="textarea"
                  v-model="ratingForm.content"
                  style="width: 300px"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="validation">确定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getorder, delorder, getreturn } from "@/api/order";
import { postRating } from "@/api/rating";
import { mapState } from "vuex";
export default {
  data() {
    return {
      id: "",
      ItemList: [],
      // 弹出表单
      ratingForm: {
        // 作品id
        artwork: "",
        // 买家id
        user: "",
        // 评分
        score: null,
        // 内容
        content: "",
      },
      // 评分颜色
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      // 是否显示弹出层
      open: false,
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  created() {
    this.getorder();
  },
  methods: {
    // 获取订单信息
    getorder() {
      getorder().then((res) => {
        console.log(res);
        this.ItemList = res.results;
      });
    },
    // 取消订单
    handleDelete(id) {
      delorder(id).then((res) => {
        console.log(res);
        this.$message({
          message: "取消成功",
          type: "success",
        });
        this.getorder();
      });
    },
    // 评论
    rating(id) {
      this.open = true;
      this.id = id;
    },
    // 取消评论
    cancel() {
      this.open = false;
    },
    // 确定评论
    validation() {
      this.ratingForm.user = this.user.id;
      // 使用订单id获取对应的订单信息
      const order = this.ItemList.find((item) => item.id === this.id);
      if (order) {
        this.ratingForm.artwork = order.artwork.id;
        postRating(this.ratingForm).then((res) => {
          console.log(res);
          this.$message({
            message: "评论成功",
            type: "success",
          });
          this.open = false;
          this.getorder();
          // 跳转到该商品的详情页
          this.$router.push(`/ItemDetails?id=${order.artwork.id}`);
        });
      } else {
        console.error("未找到对应的订单");
      }
    },
    // 退货
    Return(id) {
      getreturn(id).then((res) =>{
        this.$message({
            message: "申请退货中，请等待管理员处理！",
            type: "success",
          });
          this.getorder();
      }).catch((err) =>{
        console.log(err);
      })
    },
  },
};
</script>

<style lang="less" scoped>
.order_box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .list_box {
    width: 80%;
    height: 20%;
    border-radius: 10px;
    display: flex;
  }
}
</style>
